<template>
  <div class="filter-item">
    <div :class="{multTerm: conditions.conditions.length > 1}">
      <el-switch v-if="conditions.conditions.length > 1" class="switch" v-model="relationType" active-text="且" inactive-text="或" active-color="#39c6cd" inactive-color="#ff9c4b"></el-switch>
      <filter-condition ref="conditions" v-for="item,n in conditions.conditions" :key="n" :condition="item" :index="[index,n]"></filter-condition>
    </div>
    <el-button type="text" @click="handleAddTerm">新加一个条件</el-button>
  </div>
</template>
<script>
  import filterCondition from './filterCondition'
  export default {
    props: ['conditions', 'index'],
    components: {filterCondition},
    data () {
      return {
        relationType: this.conditions.relationType === 2
      }
    },
    watch: {
      relationType (val) {
        this.conditions.relationType = this.relationType === true ? 2 : 1
      }
    },
    methods: {
      // 添加一个条件
      handleAddTerm () {
        this.conditions.conditions.push({pid: '', fieldName: '', pattern: '', content: ''})
      }
    }
  }
</script>
<style lang="scss">
  .filter-item{
    margin: -15px 0 15px;padding:40px 10px 10px;background:#f7f5f5;
    &:nth-last-of-type(1){margin-bottom:0}
    .multTerm{
      margin:20px 0 0 40px;
      .el-row:nth-of-type(1){margin-top:-17px}
      .el-row:nth-last-of-type(1){margin-bottom:-17px}
    }
    .el-row:nth-last-of-type(1){margin-bottom:0px}
    .el-row{margin:-15px 0 25px;}
    .multTerm~.el-button{margin:20px 0 0 90px}
  }
</style>
